import {StyleSheet, Text, TouchableOpacity, View, Dimensions, TextInput} from 'react-native'
import React, {useEffect, useState} from 'react'
import PageScrollView from "@/components/PageScrollView";
import PageTabBar from "@/components/PageTabBar";
import FormTitle from "@/components/FormTitle";
import NoData from "@/components/NoData";
import FcButton from "@/components/FcButton";
import FcModal from '@/components/FcModal';
import DatePicker from '@/components/DatePicker';
import useGetStorage from "@/hooks/useGetStorage";
import {router} from "expo-router";
import {LinearGradient} from "expo-linear-gradient";
import {Flex, Stepper} from "@ant-design/react-native";

import {
  useGetProductUsageCountMutation,
} from "@/store/api/my/myApi";

import {
  useGetFeeLogListQuery,
} from "@/store/api/contentManage/contentManageApi";

import {
  useGetDeptTreeListQuery,
} from "@/store/api/login/loginApi";

type Props = {}

const usageRecord = (props: Props) => {
  const [listParams, setListParams] = useState({
    pageNo: 1,
    pageSize: 20,
    operationType: '',
    subService: '',
    createTimeBegin: '',
    createTimeEnd: '',
    userId: '',
    realname: '',
  })
  const [usageList, setUsageList] = useState<any>([])
  const [operationTypeList, setOperationTypeList] = useState<any>([])
  const [serviceList, setServiceList] = useState<any>([])
  const [realNameList, setRealNameList] = useState<any>([])
  const [chargeOpen, setChargeOpen] = useState(false)
  const [operationTypeOpen, setOperationTypeOpen] = useState(false)
  const [serviceOpen, setServiceOpen] = useState(false)
  const [realNameOpen, setRealNameOpen] = useState(false)
  const [dateOpen, setDateOpen] = useState(false)
  const [productUsageData, setProductUsageData] = useState<any>({})
  const [searchText, setSearchText] = useState<any>('')
  const [searchType, setSearchType] = useState<any>('')
  const [isCheckAll, setIsCheckAll] = useState<any>(false)
  const [rechargeOpen, setRechargeOpen] = useState<any>(false)
  const [payItem,setPayItem] = useState<any>({
    count: 1,
    money: 0.1,
  })
  
  const screenHeight = Dimensions.get('window').height;
  
  const {data:listDataRef,isSuccess:listSuccess,refetch:listRefetch} = useGetFeeLogListQuery(listParams)
  const {data:deptListDataRef,isSuccess:deptListSuccess} = useGetDeptTreeListQuery({depType: 2})
  const [getProductUsageCountFun] = useGetProductUsageCountMutation()
  
  const header = (
    <TouchableOpacity>
      <View style={styles.search_wrap}>
        <Text style={{fontFamily: 'FcIconFont', fontSize: 20, color: '#000000', marginRight: 7}}>&#xe641;</Text>
        <TextInput 
          style={styles.search} 
          placeholder={'请输入要搜索内容'} 
          placeholderTextColor={'rgba(0, 0, 0, 0.3)'}
          onChangeText={(val) => handleSearchChange(val)}
          value={searchText}
        />
      </View>
    </TouchableOpacity>
  )

  useEffect(() => {
    getProductUsageCount()
    listRefetch()

    useGetStorage('userInfo').then(res => {
      setOperationTypeList(res.sysAllDictItems['mm_fee_log_operation_type'])
      setServiceList(res.sysAllDictItems['mm_fee_item_sub_service'])
    })
  },[])

  useEffect(() => {
    if(listDataRef?.code === 200){
      const list = listDataRef?.result?.records || []
      setUsageList(list)
    }
  },[listSuccess,listDataRef])

  useEffect(() => {
    if(deptListDataRef?.code === 0){
      let list = deptListDataRef?.result || []
      let arr:any = []

      list.forEach((main:any) => {
        forEachEmpList(main, arr);
      })
      setRealNameList(arr)
    }
  },[deptListDataRef,deptListSuccess])

  //获取组件架构
  const forEachEmpList = (obj:any, arr:any) => {
    obj.empList.forEach((user:any) => {
      arr.push({text:user.realname,value:user.id});
    })
    if(obj.children && obj.children.length > 0) {
      obj.children.forEach((child:any) => {
        forEachEmpList(child, arr);
      })
    }
  }

  //获取流量点数
  const getProductUsageCount = () => {
    getProductUsageCountFun({productUsageType:'SCORE'}).then((res:any) => {
      setProductUsageData(res.data.result)
    })
  }

  //弹窗搜索
  const handleSearchChange = (val:any) => {
    setSearchText(val)
    
    let arr = []
    if(searchType == 'operationType'){
      arr = JSON.parse(JSON.stringify(operationTypeList)).filter((item:any) => item.text.includes(val))
    }else if(searchType == 'service'){
      arr = JSON.parse(JSON.stringify(serviceList)).filter((item:any) => item.text.includes(val))
    }else if(searchType == 'realName'){
      arr = JSON.parse(JSON.stringify(realNameList)).filter((item:any) => item.text.includes(val))
    }

    if(arr.length == 0) return

    let flag = true
    for(let i in arr){
      if(!arr[i].checked){
        flag = false
        break;
      }
    }

    setIsCheckAll(flag)
  }

  //筛选弹窗全选
  const handleCheckAll = () => {
    let arr = []
    if(searchType == 'operationType'){
      arr = JSON.parse(JSON.stringify(operationTypeList))
    }else if(searchType == 'service'){
      arr = JSON.parse(JSON.stringify(serviceList))
    }else if(searchType == 'realName'){
      arr = JSON.parse(JSON.stringify(realNameList))
    }

    if(searchText){
      arr.forEach((item:any) => {
        if(item.text.includes(searchText)){
          item.checked = !isCheckAll
        }
      });
    }else{
      arr.forEach((item:any) => {
        item.checked = !isCheckAll
      });
    }

    setIsCheckAll(!isCheckAll)

    if(searchType == 'operationType'){
      setOperationTypeList(arr)
    }else if(searchType == 'service'){
      setServiceList(arr)
    }else if(searchType == 'realName'){
      setRealNameList(arr)
    }
  }

  //筛选弹窗单选
  const handleCheckItem = (item:any, index:any) => {
    let arr = []
    if(searchType == 'operationType'){
      arr = JSON.parse(JSON.stringify(operationTypeList))
    }else if(searchType == 'service'){
      arr = JSON.parse(JSON.stringify(serviceList))
    }else if(searchType == 'realName'){
      arr = JSON.parse(JSON.stringify(realNameList))
    }

    if(searchText){
      arr.forEach((val:any) => {
        if(val.text.includes(searchText) && val.value == item.value){
          val.checked = !val.checked
        }
      });

      setIsCheckAll(true)

      for(let i in arr){
        if(arr[i].text.includes(searchText)){
          if(!arr[i].checked){
            setIsCheckAll(false)
            break;
          }
        }
      }
    }else{
      arr[index].checked = !arr[index].checked

      setIsCheckAll(true)

      for(let i in arr){
        if(!arr[i].checked){
          setIsCheckAll(false)
          break;
        }
      }
    }

    if(searchType == 'operationType'){
      setOperationTypeList(arr)
    }else if(searchType == 'service'){
      setServiceList(arr)
    }else if(searchType == 'realName'){
      setRealNameList(arr)
    }
  }

  //弹窗确认
  const handleSubmit = () => {
    if(searchType == 'operationType'){
      let arr = operationTypeList.filter((val:any) => val.checked).map((item: any) => item.value)

      setOperationTypeOpen(false)
      setListParams({
        ...listParams,
        pageNo: 1,
        operationType: arr.join()
      })
    }else if(searchType == 'service'){
      let arr = serviceList.filter((val:any) => val.checked).map((item: any) => item.value)

      setServiceOpen(false)
      setListParams({
        ...listParams,
        pageNo: 1,
        subService: arr.join()
      })
    }else if(searchType == 'realName'){
      let arr = realNameList.filter((val:any) => val.checked).map((item: any) => item.value)

      setRealNameOpen(false)
      setListParams({
        ...listParams,
        pageNo: 1,
        userId: arr.join()
      })
    }

    listRefetch()
  }

  //跳转到微信支付
  const handleWxPay = () => {

  }

  return (
    <PageScrollView
      isTransparentTab
      pageTab={
        <PageTabBar
          style={{marginVertical: 10}}
          title={'AI流量费'}
          right={
            <TouchableOpacity onPress={() => router.push('/my/recharge')}>
              <Text style={{}}>充值记录</Text>
            </TouchableOpacity>
          }
        />
      }
    >
      <View>
        <View>
          <LinearGradient 
            style={{borderTopLeftRadius: 8, borderTopRightRadius: 8}}
            colors={['#6989FF', '#C65EFD']}
            start={{x: 0, y: 0}}
            end={{x: 1, y: 1}}
          >
            <Flex style={{height: 106}}>
              <View style={{width: '50%', borderRightWidth: 1, borderColor: 'rgba(255, 255, 255, 0.22)'}}>
                <Text style={[styles.points_count, {fontSize: 22, fontWeight: 'bold'}]}>{productUsageData.usableUsage}</Text>
                <Text style={styles.points_count}>剩余点数</Text>
              </View>
              <View style={{width: '50%'}}>
                <Text style={[styles.points_count, {fontSize: 22, fontWeight: 'bold'}]}>{productUsageData.usedUsage}</Text>
                <Text style={styles.points_count}>已使用点数</Text>
              </View>
            </Flex>
          </LinearGradient>
          <TouchableOpacity onPress={() => setRechargeOpen(true)}>
            <Flex style={styles.recharge_box} justify='center'>
              <Text style={{color: '#334DB0', fontWeight: '500', fontSize: 15}}>充值AI流量</Text>
            </Flex>
          </TouchableOpacity>
        </View>

        <View>
          <Flex justify='between'>
            <Text style={{color: 'rgba(0, 0, 0, 0.5)', fontSize: 12}}>提示: 1 RMB = 10 点数</Text>

            <TouchableOpacity style={{marginVertical: 15}} onPress={() => setChargeOpen(true)}>
              <Flex>
                <Text style={{fontFamily: 'FcIconFont', fontSize: 14, color: '#2856FF'}}>&#xeb65;</Text>
                <Text style={{color: '#2856FF', marginLeft: 5, fontSize: 12}}>收费标准</Text>
              </Flex>
            </TouchableOpacity>
          </Flex>
        </View>

        <FormTitle style={{paddingTop: 0}} isLeftIcon title='使用记录'/>

        <Flex justify='between'>
          <TouchableOpacity style={{width: '23%'}} onPress={() => {setSearchType('operationType'); setOperationTypeOpen(true)}}>
            <Flex justify='center' style={styles.search_item}>
              <Text style={styles.search_item_text} numberOfLines={1}>
                {operationTypeList.filter((val:any) => val.checked)?.[0]?.text ||'操作类型'}
              </Text>
              <Text style={{fontFamily: 'FcIconFont', fontSize: 16, color: 'rgba(0, 0, 0, 0.5)'}}>&#xe647;</Text>
            </Flex>
          </TouchableOpacity>

          <TouchableOpacity style={{width: '23%'}} onPress={() => {setSearchType('service'); setServiceOpen(true)}}>
            <Flex justify='center' style={styles.search_item}>
              <Text style={styles.search_item_text} numberOfLines={1}>
                {serviceList.filter((val:any) => val.checked)?.[0]?.text ||'服务项'}
              </Text>
              <Text style={{fontFamily: 'FcIconFont', fontSize: 16, color: 'rgba(0, 0, 0, 0.5)'}}>&#xe647;</Text>
            </Flex>
          </TouchableOpacity>

          <TouchableOpacity style={{width: '23%'}} onPress={() => {setSearchType('realName'); setRealNameOpen(true)}}>
            <Flex justify='center' style={styles.search_item}>
              <Text style={styles.search_item_text} numberOfLines={1}>
                {realNameList.filter((val:any) => val.checked)?.[0]?.text ||'使用人'}
              </Text>
              <Text style={{fontFamily: 'FcIconFont', fontSize: 16, color: 'rgba(0, 0, 0, 0.5)'}}>&#xe647;</Text>
            </Flex>
          </TouchableOpacity>

          <TouchableOpacity style={{width: '23%'}} onPress={() => setDateOpen(true)}>
            <Flex justify='center' style={styles.search_item}>
              <Text style={styles.search_item_text} numberOfLines={1}>交易时间</Text>
              <Text style={{fontFamily: 'FcIconFont', fontSize: 16, color: 'rgba(0, 0, 0, 0.5)'}}>&#xe647;</Text>
            </Flex>
          </TouchableOpacity>
        </Flex>

        <View>
          {
            usageList.map((item:any, index:any) => (
              <View key={index} style={styles.usage_item}>
                <View style={{paddingHorizontal: 13}}>
                  <Text style={{fontSize: 15, fontWeight: '500', marginBottom: 6}}>{item.serviceName}</Text>
                  <Text style={{color: 'rgba(0, 0, 0, 0.5)'}}>详情：{item.details}</Text>
                </View>
                <View style={styles.usage_item_detail}>
                  <Flex justify='between' style={{marginTop: 12}}>
                    <Text style={styles.usage_item_label}>消费数量：<Text style={styles.usage_item_value}>{item.num}</Text></Text>
                    <Text style={styles.usage_item_label}>流量：<Text style={styles.usage_item_value}>{item.flowNum}</Text></Text>
                  </Flex>
                  <Flex justify='between' style={{marginTop: 12}}>
                    <Text style={styles.usage_item_label}>消耗点数：<Text style={{color: '#FA5151'}}>{item.score}</Text></Text>
                    <Text style={styles.usage_item_label}>累计使用点数：<Text style={{color: '#FA5151'}}>{item.scoreSum}</Text></Text>
                  </Flex>
                  <Flex justify='between' style={{marginTop: 12}}>
                    <Text style={styles.usage_item_label} numberOfLines={1}>使用人：<Text style={styles.usage_item_value}>{item.username}</Text></Text>
                    <Text style={styles.usage_item_label}>操作类型：<Text style={styles.usage_item_value}>{operationTypeList.find((val:any) => val.value == item.operationType)?.text}</Text></Text>
                  </Flex>
                  <Flex justify='between' style={{marginTop: 12}}>
                    <Text style={{color: 'rgba(0, 0, 0, 0.5)'}}>交易时间：<Text style={styles.usage_item_value}>{item.createTime}</Text></Text>
                  </Flex>
                </View>
              </View>
            ))
          }
          {usageList.length == 0 && <Flex style={{height: screenHeight - 400}}><NoData hintText='暂无使用记录'/></Flex>}
        </View>

        {/* 收费标准弹窗 */}
        <FcModal
          isOpen={chargeOpen}
          onFcModalClose={() => setChargeOpen(false)}
          titleText='收费标准'
          titleBottomBorderWidth={1}
        >
          <View>
            <View style={styles.project_item}>
              <Text style={styles.project_label}>扣除项目：<Text style={styles.project_value}>AI文案</Text></Text>
              <Text style={styles.project_label}>扣除标准：<Text style={styles.project_value}>按基座大模型使用成本进行收费</Text></Text>
              <Text style={styles.project_label}>标准单位：<Text style={styles.project_value}>篇</Text></Text>
              <Flex align='start'>
                <Text style={styles.project_label}>扣除场景：</Text>
                <Text style={styles.project_value}>①AI原创文案→【原创文案输出】功能 ②关键词选题&对标账号选题&AI二创文案→【输出定向文案】功能</Text>
              </Flex>
            </View>

            <View style={styles.project_item}>
              <Text style={styles.project_label}>扣除项目：<Text style={styles.project_value}>AI标题</Text></Text>
              <Text style={styles.project_label}>扣除标准：<Text style={styles.project_value}>按基座大模型使用成本进行收费</Text></Text>
              <Text style={styles.project_label}>标准单位：<Text style={styles.project_value}>次</Text></Text>
              <Flex align='start'>
                <Text style={styles.project_label}>扣除场景：</Text>
                <Text style={styles.project_value}>①内容管理→文案成品→查看→【生成标题#话题】功能 ②矩阵视频发布→【生成AI标题】功能（之前会启动视频语音识别，语音识别消耗点数另外单独计算）</Text>
              </Flex>
            </View>

            <View style={styles.project_item}>
              <Text style={styles.project_label}>扣除项目：<Text style={styles.project_value}>语音识别</Text></Text>
              <Text style={styles.project_label}>扣除标准：<Text style={styles.project_value}>按基座大模型使用成本进行收费</Text></Text>
              <Text style={styles.project_label}>标准单位：<Text style={styles.project_value}>分钟</Text></Text>
              <Flex align='start'>
                <Text style={styles.project_label}>扣除场景：</Text>
                <Text style={styles.project_value}>①关键词选题&对标账号选题→【获取视频文案】功能 ②AI二创文案→短视频入口→上传视频语音识别</Text>
              </Flex>
            </View>

            <View style={styles.project_item}>
              <Text style={styles.project_label}>扣除项目：<Text style={styles.project_value}>语音识别</Text></Text>
              <Text style={styles.project_label}>扣除标准：<Text style={styles.project_value}>按基座大模型使用成本进行收费</Text></Text>
              <Text style={styles.project_label}>标准单位：<Text style={styles.project_value}>约470字</Text></Text>
              <Flex align='start'>
                <Text style={styles.project_label}>扣除场景：</Text>
                <Text style={styles.project_value}>AI通用问答（问题+回答的字数及标点符号）</Text>
              </Flex>
            </View>
          </View>
        </FcModal>

        {/* 操作类型弹窗 */}
        <FcModal
          isOpen={operationTypeOpen}
          onFcModalClose={() => setOperationTypeOpen(false)}
          titleText='操作类型'
          header={header}
          titleBottomBorderWidth={1}
          bottom={
            <View style={styles.modal_bottom}>
              <Flex>
                <TouchableOpacity style={[styles.select_icon, isCheckAll && styles.select_active]} onPress={() => handleCheckAll()}>
                  {isCheckAll && <Text style={{fontFamily: 'FcIconFont', fontSize: 16, color: 'white'}}>&#xe64d;</Text>}
                </TouchableOpacity>
                <Text>全选</Text>
              </Flex>
                
              <FcButton
                onClick={() => handleSubmit()}
                type='BjJB'
                colors={['#6989FF', '#C65EFD']}
                style={{width: 88, height: 32, justifyContent: 'center'}}
                itemStyle={{borderRadius: 8, fontSize: 15}}
                textName='确认选择'
              />
            </View>
          }
        >
          <View style={{paddingHorizontal: 16}}>
            {
              operationTypeList.filter((val:any) => val.text.includes(searchText)).length == 0 ?
              <View style={{flexDirection: 'column',alignItems: 'center',justifyContent: 'center',paddingTop: 60,paddingBottom: 120}}>
                <NoData hintText='暂无数据'/>
              </View>
              :
              operationTypeList.filter((val:any) => val.text.includes(searchText)).map((item:any, index:any) => (
                <Flex justify='between' key={index} style={styles.modal_item}>
                  <Flex>
                    <TouchableOpacity style={[styles.select_icon, item.checked && styles.select_active]} onPress={() => handleCheckItem(item, index)}>
                      {item.checked && <Text style={{fontFamily: 'FcIconFont', fontSize: 16, color: 'white'}}>&#xe64d;</Text>}
                    </TouchableOpacity>
                    <Text>{ item.text }</Text>
                  </Flex>
                </Flex>
              ))
            }
          </View>
        </FcModal>

        {/* 服务项弹窗 */}
        <FcModal
          isOpen={serviceOpen}
          onFcModalClose={() => setServiceOpen(false)}
          titleText='服务项'
          header={header}
          titleBottomBorderWidth={1}
          bottom={
            <View style={styles.modal_bottom}>
              <Flex>
                <TouchableOpacity style={[styles.select_icon, isCheckAll && styles.select_active]} onPress={() => handleCheckAll()}>
                  {isCheckAll && <Text style={{fontFamily: 'FcIconFont', fontSize: 16, color: 'white'}}>&#xe64d;</Text>}
                </TouchableOpacity>
                <Text>全选</Text>
              </Flex>
                
              <FcButton
                onClick={() => handleSubmit()}
                type='BjJB'
                colors={['#6989FF', '#C65EFD']}
                style={{width: 88, height: 32, justifyContent: 'center'}}
                itemStyle={{borderRadius: 8, fontSize: 15}}
                textName='确认选择'
              />
            </View>
          }
        >
          <View style={{paddingHorizontal: 16}}>
            {
              serviceList.filter((val:any) => val.text.includes(searchText)).length == 0 ?
              <View style={{flexDirection: 'column',alignItems: 'center',justifyContent: 'center',paddingTop: 60,paddingBottom: 120}}>
                <NoData hintText='暂无数据'/>
              </View>
              :
              serviceList.filter((val:any) => val.text.includes(searchText)).map((item:any, index:any) => (
                <Flex justify='between' key={index} style={styles.modal_item}>
                  <Flex>
                    <TouchableOpacity style={[styles.select_icon, item.checked && styles.select_active]} onPress={() => handleCheckItem(item, index)}>
                      {item.checked && <Text style={{fontFamily: 'FcIconFont', fontSize: 16, color: 'white'}}>&#xe64d;</Text>}
                    </TouchableOpacity>
                    <Text>{ item.text }</Text>
                  </Flex>
                </Flex>
              ))
            }
          </View>
        </FcModal>

        {/* 使用人弹窗 */}
        <FcModal
          isOpen={realNameOpen}
          onFcModalClose={() => setRealNameOpen(false)}
          titleText='使用人'
          header={header}
          titleBottomBorderWidth={1}
          bottom={
            <View style={styles.modal_bottom}>
              <Flex>
                <TouchableOpacity style={[styles.select_icon, isCheckAll && styles.select_active]} onPress={() => handleCheckAll()}>
                  {isCheckAll && <Text style={{fontFamily: 'FcIconFont', fontSize: 16, color: 'white'}}>&#xe64d;</Text>}
                </TouchableOpacity>
                <Text>全选</Text>
              </Flex>
                
              <FcButton
                onClick={() => handleSubmit()}
                type='BjJB'
                colors={['#6989FF', '#C65EFD']}
                style={{width: 88, height: 32, justifyContent: 'center'}}
                itemStyle={{borderRadius: 8, fontSize: 15}}
                textName='确认选择'
              />
            </View>
          }
        >
          <View style={{paddingHorizontal: 16}}>
            {
              realNameList.filter((val:any) => val.text.includes(searchText)).length == 0 ?
              <View style={{flexDirection: 'column',alignItems: 'center',justifyContent: 'center',paddingTop: 60,paddingBottom: 120}}>
                <NoData hintText='暂无数据'/>
              </View>
              :
              realNameList.filter((val:any) => val.text.includes(searchText)).map((item:any, index:any) => (
                <Flex justify='between' key={index} style={styles.modal_item}>
                  <Flex>
                    <TouchableOpacity style={[styles.select_icon, item.checked && styles.select_active]} onPress={() => handleCheckItem(item, index)}>
                      {item.checked && <Text style={{fontFamily: 'FcIconFont', fontSize: 16, color: 'white'}}>&#xe64d;</Text>}
                    </TouchableOpacity>
                    <Text>{ item.text }</Text>
                  </Flex>
                </Flex>
              ))
            }
          </View>
        </FcModal>

        <FcModal
          isOpen={rechargeOpen}
          onFcModalClose={() => setRechargeOpen(false)}
          titleText='充值算力点数'
          titleDesc='1RMB=10个算力点数，1000个算力点数起充'
          bottom={
            <View style={styles.bottom_btn}>
              <View style={styles.count_wrap}>
                <Text style={[styles.count_txt,{marginLeft: 0,marginRight: 4}]}>应付¥</Text>
                <Text style={styles.count}>{payItem.money}</Text>
              </View>
              <TouchableOpacity style={styles.payment_box} onPress={() => handleWxPay()}>
                <Flex style={{flex: 1}} justify='center'>
                  <Text style={{fontFamily: 'FcIconFont', fontSize: 20, color: 'white', marginRight: 5}}>&#xe67b;</Text>
                  <Text style={{fontSize: 15, color: 'white'}}>微信支付</Text>
                </Flex>
              </TouchableOpacity>
            </View>
          }
        >
          <View style={styles.top_up}>
            <Text style={{color: 'rgba(0, 0, 0, 0.9)',fontSize: 15}}>充值算力点数</Text>
            <Stepper
              style={styles.stepper}
              inputStyle={styles.inputStyle}
              defaultValue={payItem.count}
              min={1}
              step={1}
              onChange={(value:any) => {
                let obj = {
                  ...payItem,
                  count: value,
                  money: (value * 0.1).toFixed(1),
                }
                setPayItem(obj)
              }}
            />
          </View>
        </FcModal>

        {/* 日期弹窗 */}
        <DatePicker
          isOpen={dateOpen} 
          titleText={'交易时间'} 
          dateRange={[listParams.createTimeBegin, listParams.createTimeEnd]}
          dateType='range'
          onClose={() => setDateOpen(false)}
          onConfirm={(startDate:any, endDate:any) => {setListParams({...listParams, pageNo: 1, createTimeBegin: startDate, createTimeEnd: endDate}); listRefetch()}}
        ></DatePicker>
      </View>
    </PageScrollView>
  )
}

export default usageRecord

const styles = StyleSheet.create({
  points_count: {
    textAlign: 'center',
    color: '#FFF',
    fontSize: 12,
    lineHeight: 30,
  },
  recharge_box: {
    height: 48,
    borderBottomLeftRadius: 8,
    borderBottomRightRadius: 8,
    backgroundColor: '#FFF'
  },
  project_item: {
    borderBottomWidth: 1,
    borderColor: 'rgba(0, 0, 0, 0.1)',
    padding: 16,
  },
  project_label: {
    color: 'rgba(0, 0, 0, 0.5)',
    lineHeight: 30
  },
  project_value: {
    lineHeight: 30,
    flex: 1,
    color: 'rgba(0, 0, 0, 0.9)',
  },
  search_item: {
    height: 28,
    borderRadius: 4,
    backgroundColor: '#FFF',
  },
  search_item_text: {
    color: 'rgba(0, 0, 0, 0.5)',
    fontSize: 12,
    marginLeft: 2,
    maxWidth: '85%',
  },
  usage_item: {
    paddingVertical: 13,
    borderRadius: 8,
    backgroundColor: '#FFF',
    marginTop: 10,
  },
  usage_item_detail: {
    borderTopWidth: 1,
    borderColor: '#D8D8D8',
    marginTop: 10,
    paddingHorizontal: 13,
  },
  usage_item_label: {
    width: '49%',
    fontSize: 13,
    color: 'rgba(0, 0, 0, 0.5)',
  },
  usage_item_value: {
    color: 'rgba(0, 0, 0, 0.7)',
  },
  search_wrap: {
    flexDirection: 'row',
    alignItems: "center",
    backgroundColor: '#F1F2F4',
    borderRadius: 9,
    marginTop: 12,
    marginHorizontal: 16,
    height: 40,
    paddingHorizontal: 14,
  },
  search: {
    flex: 1,
    height: '100%',
    color: 'rgba(0,0,0,0.9)',
    lineHeight: 20,
  },
  modal_bottom: {
    height: 56,
    display: 'flex',
    flexDirection: "row",
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
  },
  modal_item: {
    height: 56,
    borderRadius: 8,
    borderBottomWidth: 1,
    borderColor: 'rgba(0, 0, 0, 0.1)',
  },
  select_icon: {
    width: 20,
    height: 20,
    borderRadius: '50%',
    borderWidth: 1,
    borderColor: 'rgba(0,0,0,0.5)',
    marginRight: 12,
  },
  select_active: {
    borderColor: '#2856FF',
    backgroundColor: '#2856FF',
    flexDirection: 'row',
    alignItems: "center",
    justifyContent: "center"
  },
  bottom_btn: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 16,
    height: 56,
    justifyContent: "space-between",
    backgroundColor: 'white'
  },
  count_wrap: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
  },
  count: {
    fontSize: 22,
    color: '#FA5151',
    fontWeight: 500
  },
  count_txt: {
    marginLeft: 4,
    fontSize: 12,
    color: 'rgba(0,0,0,0.9)'
  },
  top_up: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 16,
    paddingVertical: 40
  },
  stepper: {
    color: '#2856FF',
    fontWeight: 'bold',
    width: 180
  },
  inputStyle: {
    color: '#2856FF',
    fontWeight: 'bold',
    // width: 108,
    // height: 40
    backgroundColor: '#F1F2F4',
    fontSize: 24,
    borderRadius: 8,
    paddingHorizontal: 10
  },
  payment_box: {
    flex: 1,
    marginLeft: 4,
    height: 40,
    borderRadius: 8,
    backgroundColor: '#07C160'
  }
})

